<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>好友</title>
</head>
<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
<link
        href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css"
        rel="stylesheet"
/>
<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
<link href="cdn/all.css" media="screen" rel="stylesheet" />
<link href="css/friend.css" media="screen" rel="stylesheet" />
<script src="./js/star.js"></script>

<body>
<div id="app">
  <star>
    <div class="container">
      <el-container>
        <el-aside width="200px">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
          </el-input>
          <div class="inform">
            <li onclick="changePage('inform')">
              <el-badge :value="badge" class="item">消息通知
                </el-badge>
                <i class="el-icon-arrow-right"></i></li>
          </div>
          <div class="tabs">
            <el-tabs
                    style="background-color: white"
                    v-model="activeName"
                    @tab-click="handleClick"
            >
              <el-tab-pane
                      style="align-items: center"
                      label="用户管理"
                      name="first"
              >
                <el-menu v-for="friend in friends">
                  <el-menu-item @click="changePage('chat',friend.friendname,friend.friendid)">
                    <div class="uimg">
                      <img :src="friend.img" />
                      <div class="uname">
                          <p>{{friend.friendname}}</p>
                      </div>
                    </div>
                  </el-menu-item>
                </el-menu>
              </el-tab-pane>
              <el-tab-pane label="队伍管理" name="second">
                <el-menu v-for="team in teams">
                  <el-menu-item @click="changePage1('chat',team.name)">
                    <div class="uimg">
                      <img :src="team.image" />
                      <div class="uname">
                          <p>{{team.name}}</p>
                      </div>
                    </div>
                  </el-menu-item>
                </el-menu>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-aside>
        <el-main>
          <iframe
                  src="inform.html"
                  frameborder="0"
                  id="demoAdmin"
                  style="width: 100%; height: 100%"
          ></iframe>
        </el-main>
      </el-container>
    </div>
  </star>
</div>
</body>
<script>
  var v = new Vue({
    el: "#app",
    data: {
      badge:null,
      activeName: "first",
      friends:{},
      teams:{},
    },
    created() {
      let token = sessionStorage.getItem("Token");
      axios.defaults.headers.common['Token'] = token;

      axios.post("/user/user/getfrined").then(res => {
        if (res.data.code == 1) {
          this.friends = res.data.data;
        }
      });
      axios.post("/team/team/getteams").then(res => {
        if (res.data.code == 1) {
          this.teams = res.data.data;
        }
      });
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
    },
  });
</script>
<script>
  function changePage(page,name,id) {
    document.getElementById("demoAdmin").src = page + ".html?name=" + name+"&id="+id;
  }

  function changePage1(page,name) {
    document.getElementById("demoAdmin").src = page + ".html?name=" + name;
  }
</script>
</html>
